{{define "/home/search.html"}}
<!DOCTYPE html>
<html>

<head>
    <title>IM-添加朋友</title>
    {{template "/layout/head.html"}}
    <style>
        .title {
            margin: 20px 15px 7px;
            color: #6d6d72;
            font-size: 15px;
        }
        
        .my-mui-search {
            line-height: 34px;
            margin-top: 15px;
        }
        
        .my-mui-search input {
            margin-bottom: 0;
        }
        
        .my-mui-content {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            /* background-color: #ffffff; */
            background-color: #efeff4;
            z-index: 999;
            padding: 10px !important;
        }
        
        .my-mui-content .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }
    </style>
</head>
<link rel="stylesheet" type="text/css" href="/assets/font/iconfont.css">
<link rel="stylesheet" type="text/css" href="/assets/css/chat.css">

<body>

    <div id="app">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">添加朋友</h1>
        </header>

        <div class="mui-content">
            <div class="mui-control-content mui-active">
                <div class="mui-input-row mui-search my-mui-search">
                    <input type="search" class="mui-input-clear" placeholder="昵称或群名称" v-model="searchText">
                </div>
            </div>

            <div class="title" v-if="userList&&userList.length>0">查找人</div>
            <div class="mui-control-content mui-active" style="height: 171px;" v-if="userList&&userList.length>0">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell mui-media" v-for="item in userList" @tap="addContact(item)">
                                <a class="mui-navigate-right">
                                    <img class="mui-media-object mui-pull-left" :src="item.avator">
                                    <div class="mui-media-body">
                                        <span v-text="item.nickname"></span>
                                        <p class='mui-ellipsis' style="width: 90%;" v-text="item.sign"></p>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- <div class="title"> 查找群</div>
            <div class="mui-control-content mui-active" style="height: 171px;">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    Item 1
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    Item 2
                                </a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">
                                    Item 3
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div> -->
        </div>

        <div class="mui-content my-mui-content" v-if="win!=='main'&&other_info">
            <div class="header">
                <button class="mui-btn " @tap="win='main'">取消</button>
                <h4 v-text="other_info.nickname"></h4>
                <button class="mui-btn mui-btn-success" @tap="send">发送</button>
            </div>
            <div>
                <div class="title">问题：我的生日</div>
                <textarea name="answer" placeholder="请输入对方设置的答案" v-model="answer"></textarea>
            </div>
            <div>
                <div class="title">验证消息</div>
                <textarea name="verify" placeholder="请输入验证信息" v-model="verify"></textarea>
            </div>
        </div>

    </div>
    <script type="text/javascript">
        const app = Vue.createApp({
            // 定义变量
            data() {
                return {
                    owner_id: "",
                    owner_info: null,
                    token: "",
                    searchText: "",
                    userList: [],
                    win: "main",
                    other_info: null,
                    answer: "",
                    verify: ""
                }
            },
            // 函数定义
            methods: {
                init: function() {
                    this.getOwnerInfo();
                },
                getOwnerInfo: function() {
                    // 获取owner信息
                    this.token = localStorage.getItem("token");
                    this.owner_info = JSON.parse(localStorage.getItem("userinfo"));
                    this.owner_id = this.owner_info.id;
                },
                addContact: function(item) {
                    this.win = "add";
                    this.other_info = item;
                    console.log(item);
                },
                send: function() {
                    var that = this;
                    $.ajax({
                        url: "/info/friendrequest",
                        type: "POST",
                        headers: {
                            "token": that.token
                        },
                        data: {
                            "owner_id": that.owner_id,
                            "other_id": that.other_info.id,
                            "answer": that.answer,
                            "verify": that.verify
                        },
                        success: function(res) {
                            console.log(res)
                            mui.toast(res.msg);
                            if (res.code !== 0) {
                                return;
                            }
                            that.win = "main";
                        },
                        error: function(res) {
                            console.log(res)
                        }
                    })
                }
            },
            // 监听变量
            watch: {
                // 每当 变量searchText 发生变化时，该函数将会执行
                searchText(n, o) {
                    console.log(n, o)
                    var that = this;
                    $.ajax({
                        url: "/info/search",
                        type: "GET",
                        headers: {
                            "token": this.token
                        },
                        data: {
                            owner_id: this.owner_id,
                            search: n
                        },
                        success: function(res) {
                            console.log(res);
                            if (res.code !== 0) {
                                return mui.toast(res.msg);
                            }
                            that.userList = res.data;
                        },
                        error: function(res) {
                            console.log(res);
                        }
                    })
                }
            },


            // 生命周期函数
            // app创建前执行
            beforeCreate: function() {
                console.log("beforeCreate")
            },
            // app创建后执行
            created: function() {
                this.init();
            },
            // 渲染前执行
            beforeMount: function() {
                // 
            },
            // 渲染后执行
            mounted: function() {
                // 
            },
            // 数据被修改前执行
            beforeUpdate: function() {
                // 
            },
            // 数据被被修改后执行
            updated: function() {
                // 
            }
        })

        app.mount('#app')
    </script>

    <script type="text/javascript">
        // 初始化mui
        mui.init({
            swipeBack: true //启用右滑关闭功能
        });
        mui('.mui-scroll-wrapper').scroll();
    </script>

</body>

</html>
{{end}}